<template>
    <div class="gray-bg ChannelList">
	    <div class="row wrapper border-bottom white-bg page-heading">
	        <div class="col-lg-10 col-lg-offset-1">
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <router-link to="../../login"> <i class="fa fa-sign-out"></i> Log out </router-link>
                    </li>
                </ul>
                <h2>广告推广渠道列表</h2>
                <ol class="breadcrumb">
                    <li>
                        <a> WeShare Partner </a>
                    </li>
                    <li class="active">
                        <strong>广告推广渠道列表</strong>
                    </li>
                </ol>
            </div>
	    </div>
        <div class="wrapper wrapper-content animated fadeInRight min-height-800px">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>广告推广渠道列表</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-8 m-b-xs">
	                                <div class="form-group" id="data_5">
	                                    <div class="input-daterange input-group" id="datepicker">
	                                        <!-- <input type="text" class="input-sm form-control" name="start" value="2017-07-17"/>
	                                        <span class="input-group-addon">to</span>
	                                        <input type="text" class="input-sm form-control" name="end" value="2017-07-17" /> -->
                                            <span> FROM </span>
                                            <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
                                            <span> TO  </span>
                                            <date-picker :date="endtime" :option="option" :limit="limit"></date-picker>
	                                    </div>
	                                </div>

                                </div>
                                <div class="float-right">
		                            <button class="btn btn-w-m btn-primary" v-on:click="refresh" >
		                                <i class="fa fa-refresh"></i>
                                        刷新
		                            </button>
                                    <router-link to="./Post">
                                        <button type="button" class="btn btn-w-m btn-primary">
                                            <i class="fa fa-plus"></i> 
                                            广告推广渠道 
                                        </button>
                                    </router-link>
                                </div>
                                <!-- 搜索框 -->
                                <!-- <div class="col-sm-3">
                                    <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> Go!</button> </span></div>
                                </div> -->
                            </div>
                            <div class="table-responsive">
                                <!-- <table class="table table-striped"> -->
                                <table class="table table-bordered">
                                    <thead>
	                                    <tr>
	                                        <th>推广渠道名称 </th>
	                                        <th>单日预算($) </th>
	                                        <th>计费方式 </th>
	                                        <th>展示(Impressions) </th>
	                                        <th>点击(Clicks) </th>
	                                        <th>CPM($) </th>
	                                        <th>CPI($) </th>
	                                        <th>安装(Installs) </th>
	                                        <th>消费($) </th>
	                                        <th>状态 </th>
	                                    </tr>
                                    </thead>
                                    <tbody>
	                                    <tr v-for="item in items">
	                                    	<td>
                                                <router-link :to="'./' + item.cid + '/AD/List'">
                                                <!-- <router-link to="./AD/List"> -->
                                                    {{ item.cname }}
                                                </router-link>
                                            </td>
	                                    	<td>{{ item.priceDay }}</td>
                                            <td>{{ item.payway }}</td>
                                            <td>{{ item.impl }}</td>
                                            <td>{{ item.click }}</td>
                                            <td>{{ item.ecpm }}</td>
                                            <td>{{ item.cpi }}</td>
                                            <td>{{ item.installs }}</td>
                                            <td>{{ item.consume }}</td>
                                            <td>{{ item.isdisplay }}</td>
	                                    </tr>
                                        <tr>
                                            <td> 总和 </td>
                                            <td></td>
                                            <td></td>
                                            <td>{{ totalimpl }}</td>
                                            <td>{{ totalclick }}</td>
                                            <td></td>
                                            <td></td>
                                            <td>{{ totalinstalls }}</td>
                                            <td>{{ totalconsume }}</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

// 配置参数
import config from '../../../../config/config.js'
import dateFormat from '../../server/dateFormat.js'
import myDatepicker from '../../../../static/js/plugins/vue-datepicker/vue-datepicker-es6.vue'
import toastr from '../../../../static/js/toastr.min'

// import '../../../../static/js/plugins/metisMenu/jquery.metisMenu.js'    
// import '../../../../static/js/plugins/slimscroll/jquery.slimscroll.min.js'


export default {
  data () {
    return {
        startTime: {
          time: ''
        },
        endtime: {
          time: ''
        },
        items: [],
        // 展示
        totalimpl: 0,
        // 点击
        totalclick: 0,
        // 安装
        totalinstalls: 0,
        // 消费
        totalconsume: 0,
        // 配置日期选择框
        option: config.datePicker.option,
        timeoption: config.datePicker.timeoption,
        multiOption: config.datePicker.multiOption,
        limit: config.datePicker.limit
    }
  },
  components: {
    "date-picker": myDatepicker
  },
  // 组建创建完成之后执行
  created () {

    //今天&昨天的时间 
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    this.endtime.time = dateFormat.format(new Date(), "yyyy-MM-dd");
    this.startTime.time = dateFormat.format(yesterday, "yyyy-MM-dd");

    //  获取列表数据
    this.GetTableData()
  },
  methods: {
    refresh () {
        if (this.endtime.time < this.startTime.time) {
            // 刷新时候日期的判断
            toastr.info("截至日期不能小于开始日期");
            return false;
        } else if (dateFormat.format(new Date(), "yyyy-MM-dd") < this.endtime.time) {
            // 当前日期不能小于截止日期check 
            toastr.info("截至日期不能大于当前日期");
            return false;
        }
        this.GetTableData(true);
    },
    GetTableData (refresh) {
        var vue = this;

        // 清空汇总数据
        vue.totalimpl = 0;
        vue.totalclick = 0;
        vue.totalinstalls = 0;
        vue.totalconsume = 0;

                    
        $.ajax({
                url:'http://' + config.URL + '/ad/showChannels',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                data: {
                    // {{ $route.params.username }}
                    "id": vue.$route.params.username,
                    "pageNum": 1,
                    "pageSize": 1000,
                    "begain": vue.startTime.time,
                    "end": vue.endtime.time
                },  
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    // console.log(data.data.result);
                    vue.items = data.data.result;

                    // 计算总值
                    data.data.result.forEach(function(index, element) {
                        // console.log(index.impl);
                        // 展示求和
                        vue.totalimpl = vue.totalimpl + parseInt(index.impl);
                        // 点击求和
                        vue.totalclick = vue.totalclick + parseInt(index.click);
                        // 消费求和
                        vue.totalinstalls = vue.totalinstalls + parseInt(index.installs);
                        // 消费求和
                        vue.totalconsume = vue.totalconsume + index.consume;
                        // console.log(vue.totalconsume);
                    })
                    if (refresh) {
                        toastr.success("刷新成功");
                    }

                },
                error:function(XHR, textStatus, errorThrown){
                    toastr.error("请求出错，请稍后再试");
                }
        });
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
